<template>
	<view class="page">
		<view class="block_1">
			<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
			<view class="block_2">
				<view class="text-group_1">
					<view class="text-wrapper_1">
						<text lines="1" class="text_2">优惠团购价</text>
						<text lines="1" class="text_3">￥</text>
						<text lines="1" class="text_4">75.00</text>
					</view>
					<text lines="1" class="text_5">已有13人可享受此团购优惠价</text>
				</view>
				<view class="group_1">
					<view class="group_2">
						<view class="image-wrapper_4">
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/43c336f0825cc7532e8db6674aa5781dfb728817.png"
								class="image_99"></image>
						</view>
						<view class="text-wrapper_2">
							<text lines="1" class="text_6">原价</text>
							<text lines="1" class="text_7">￥</text>
							<text lines="1" class="text_8">120.00</text>
						</view>
					</view>
					<view class="group_3">
						<text lines="1" class="paragraph_1">kira阴阳师cosplay系列第一代<br />跑鞋</text>
						<view class="image-text_1">
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/08c2a539cdf6fa3aa0c6d12edff322c14766ff6d.png"
								class="icon_2"></image>
							<text lines="1" class="text-group_2">体鱼大平台</text>
						</view>
						<view class="block_3">
							<view class="text-wrapper_3">
								<text lines="1" class="text_9">{{countdownt}}</text>
							</view>
							<text lines="1" class="text_10">天</text>
							<view class="text-wrapper_4">
								<text lines="1" class="text_11">{{countdownh}}</text>
							</view>
							<text lines="1" class="text_12">时</text>
							<view class="text-wrapper_5">
								<text lines="1" class="text_13">{{countdownm}}</text>
							</view>
							<text lines="1" class="text_14">分</text>
							<view class="text-wrapper_6">
								<text lines="1" class="text_15">{{countdowns}}</text>
							</view>
							<text lines="1" class="text_16">秒</text>
						</view>
						<text lines="1" class="text_17">拼团结束后不可享受优惠团购价</text>
					</view>
				</view>

				<view class="group_4">
					<view class="text-wrapper_7">
						<text lines="1" class="text_18">满5人成团</text>
						<text lines="1" class="text_19">满10人成团</text>
						<text lines="1" class="text_20">满15人成团</text>
						<text lines="1" class="text_21">满20人成团</text>
					</view>
					<view class="section_2">
						<u-steps current="2" dot activeColor="#7C1DFF">
							<u-steps-item title="¥100"></u-steps-item>
							<u-steps-item title="¥75"></u-steps-item>
							<u-steps-item title="¥50"></u-steps-item>
							<u-steps-item title="¥25"></u-steps-item>
						</u-steps>
					</view>
				</view>
			</view>
			<view class="block_4">
				<view class="block_5">
					<view class="group_5"></view>
					<text lines="1" class="text_26">参团队友</text>
					<text lines="1" class="text_27">13人已参团</text>
				</view>
				<scroll-view scroll-view :scroll-top="scrollTop" scroll-y="true">
					<view class="block_6">
						<view class="block_7">
							<view class="group_6">
								<view class="image-text_2" v-for="(item,index) in 8" :key="index">
									<image
										src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/b22054fa3a0680faa78dd2e58a8a0f3c15ff4b25.png"
										class="image_2"></image>
									<text lines="1" class="text-group_3">小小柚子~</text>
								</view>
								<view class="image-text_2">
									<image
										src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/98bf949b018a6d7492bbca46968e6a07265d9887.png"
										class="image_2"></image>
									<text lines="1" class="text-group_3">邀请</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="block_10">
					<view class="box_3">
						<view class="text-wrapper_9">
							<text lines="1" class="text_31">￥</text>
							<text lines="1" class="text_32">5.</text>
							<text lines="1" class="text_33">00</text>
						</view>
						<view class="image-text_10">
							<image
								src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1e1399d203595492d90b877e16a382ff3fd1a923.png"
								class="icon_3"></image>
							<text lines="1" class="text-group_11">此价格为定金,开团后补差价</text>
						</view>
					</view>
					<view class="button_1">
						<text lines="1" class="text_266">立即参团</text>
						<text lines="1" class="text_266">{{countdownt}}:{{countdownh}}:{{countdownm}}:{{countdowns}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				active: 1,
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "拼团详情",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				countdownh: '',
				countdownm: '',
				countdowns: '',
				timer: null, //重复执行
				str_time: '',
				expire_time: '',
				t_time: '',
				t_times: '',
				countdownt: ''
			};
		},
		onLoad() {
			this.getOrderDetail()
			this.timer = setInterval(() => {
				this.showtime()
			})
			setTimeout(() => {
				if (this.countdownh != '' || this.countdownm != '' || this.countdowns != '') {
					// this.paymoney()
				}
			}, 200)
		},
		methods: {
			// 时间倒计时
			showtime() {
				var nowtime = new Date(), //获取当前时间
					starttime = new Date(this.t_times); //定义结束时间
				// endtime = new Date(this.t_time); //定义结束时间
				var lefttime = starttime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					// lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
					// 	(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
					// 	24), //加天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24)) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24)) : Math.floor((lefttime / (1000 * 60 * 60) % 24)), //不加天数
					//计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? "0" + Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
					this.countdownt = leftd //天数
					this.countdownh = lefth //返回倒计时的字符串
					this.countdownm = leftm //返回倒计时的字符串
					this.countdowns = lefts //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if (lefttime < 0) {
					// uni.navigateTo({
					// 	url: '/pages/personal/orders/orders?tab=2',
					// });
					return this.countdownh = this.countdownh = this.countdownm = this.countdowns = "00"

				}
			},
			paymoney() {
				if (this.countdownh == '00' && this.countdownm == '00' && this.countdowns == '00') {
					uni.navigateTo({
						url: '/pages/personal/orders/orders?tab=2',
					});
				}
			},
			// 获取详情  async
			getOrderDetail() {
				// 	let params = {
				// 		id: this.id,
				// 		project_id: getApp().globalData.projectId,
				// 		app_id: this.$https.weixinAppId,
				// 	}
				// 	let res = await venues.getOrderDetail(params)
				// 	if (res.code == 1) {
				// 		this.data_xq = res.data.data

				// this.create_at = this.data_xq.create_at
				// 获取当前时间
				const now = new Date();
				// 获取年、月、日、小时、分钟、秒
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hour = String(now.getHours()).padStart(2, '0');
				const minute = String(now.getMinutes()).padStart(2, '0');
				const second = String(now.getSeconds()).padStart(2, '0');
				// 拼接成指定格式的字符串
				this.create_at = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
				// 结束时间
				this.expire_time = '2024-10-30 12:00:00'
				// 当前时间与结束时间相减
				var fullTime = this.create_at; // 日期字符串
				var timeArr = fullTime.replace(" ", ":").replace(/\:/g, "-").split("-");
				var nian = timeArr[0];
				var yue = timeArr[1];
				var ri = timeArr[2];
				var shi = timeArr[3];
				var fen = timeArr[4];
				var miao = timeArr[5];
				var str = nian + '/' + yue + '/' + ri + ' ' + shi + ':' + fen + ':' + miao;
				var t = new Date(str); //你已知的时间
				this.t_time = t
				var t_s = t.getTime(); //转化为时间戳毫秒数
				t.setTime(t_s + 1000 * 60 * 15); //设置新时间比旧时间多一分钟
				this.str_time = t
				var fullTimes = this.expire_time; // 日期字符串
				var timeArrs = fullTimes.replace(" ", ":").replace(/\:/g, "-").split("-");
				var nians = timeArrs[0];
				var yues = timeArrs[1];
				var ris = timeArrs[2];
				var shis = timeArrs[3];
				var fens = timeArrs[4];
				var miaos = timeArrs[5];
				var strs = nians + '/' + yues + '/' + ris + ' ' + shis + ':' + fens + ':' + miaos;
				var ts = new Date(strs); //你已知的时间
				this.t_times = ts
			},
		},
	};
</script>

<style lang="less" scoped>
	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.block_1 {
		background: linear-gradient(90deg, #3E218C, #463ac6, #4d42e1);
		width: 750rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.block_2 {
		width: 750rpx;
		height: 590rpx;
		display: flex;
		flex-direction: column;
	}

	.text-group_1 {
		width: 290rpx;
		height: 78rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 23rpx 0 0 230rpx;
	}

	.text-wrapper_1 {
		width: 290rpx;
		height: 38rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_2 {
		width: 290rpx;
		height: 38rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 48rpx;
	}

	.text_3 {
		width: 290rpx;
		height: 38rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 48rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 48rpx;
	}

	.text_4 {
		width: 290rpx;
		height: 38rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 48rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 48rpx;
	}

	.text_5 {
		width: 289rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 19rpx 0 0 1rpx;
	}

	.group_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		width: 690rpx;
		height: 236rpx;
		flex-direction: row;
		display: flex;
		margin: 30rpx 0 0 30rpx;
	}

	.group_2 {
		height: 236rpx;
		display: flex;
		flex-direction: column;
		width: 236rpx;
		margin: 20rpx 0 0 20rpx;
	}

	.image-wrapper_4 {
		background-color: rgba(249, 249, 249, 1.000000);
		border-radius: 5rpx;
		height: 150rpx;
		display: flex;
		width: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.image_99 {
		width: 179rpx;
		height: 90rpx;
	}

	.text-wrapper_2 {
		width: 151rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 0rpx 0 0 12rpx;
	}

	.text_6 {
		width: 151rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 23rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 48rpx;
	}

	.text_7 {
		width: 151rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 27rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 48rpx;
	}

	.text_8 {
		width: 151rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 27rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 48rpx;
	}

	.group_3 {
		width: 345rpx;
		height: 199rpx;
		display: flex;
		flex-direction: column;
		margin: 20rpx 96rpx 0 33rpx;
	}

	.paragraph_1 {
		width: 430rpx;
		height: 52rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 25rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		line-height: 46rpx;
	}

	.image-text_1 {
		width: 149rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 24rpx 0 0 1rpx;
	}

	.icon_2 {
		width: 30rpx;
		height: 24rpx;
	}

	.text-group_2 {
		width: 109rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
	}

	.block_3 {
		width: 298rpx;
		height: 35rpx;
		margin-top: 20rpx;
		flex-direction: row;
		display: flex;
	}

	.text-wrapper_3 {
		background-color: rgba(124, 29, 255, 1.000000);
		border-radius: 5rpx;
		height: 35rpx;
		display: flex;
		flex-direction: column;
		width: 36rpx;
	}

	.text_9 {
		width: 24rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 21rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 9rpx 0 0 6rpx;
	}

	.text_10 {
		width: 21rpx;
		height: 20rpx;
		overflow-wrap: break-word;
		color: rgba(124, 29, 255, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 7rpx 0 0 8rpx;
	}

	.text-wrapper_4 {
		background-color: rgba(124, 29, 255, 1.000000);
		border-radius: 5rpx;
		height: 35rpx;
		margin-left: 8rpx;
		display: flex;
		flex-direction: column;
		width: 36rpx;
	}

	.text_11 {
		width: 25rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 21rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 9rpx 0 0 6rpx;
	}

	.text_12 {
		width: 20rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(124, 29, 255, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 6rpx 0 0 11rpx;
	}

	.text-wrapper_5 {
		background-color: rgba(124, 29, 255, 1.000000);
		border-radius: 5rpx;
		height: 35rpx;
		margin-left: 9rpx;
		display: flex;
		flex-direction: column;
		width: 36rpx;
	}

	.text_13 {
		width: 25rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 21rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 9rpx 0 0 6rpx;
	}

	.text_14 {
		width: 21rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(124, 29, 255, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 6rpx 0 0 12rpx;
	}

	.text-wrapper_6 {
		background-color: rgba(124, 29, 255, 1.000000);
		border-radius: 5rpx;
		height: 35rpx;
		margin-left: 11rpx;
		display: flex;
		flex-direction: column;
		width: 36rpx;
	}

	.text_15 {
		width: 25rpx;
		height: 17rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 21rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 9rpx 0 0 6rpx;
	}

	.text_16 {
		width: 22rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(124, 29, 255, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 6rpx 0 0 11rpx;
	}

	.text_17 {
		width: 307rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Regular;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin-top: 23rpx;
	}

	.group_4 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		position: relative;
		width: 690rpx;
		height: 158rpx;
		display: flex;
		flex-direction: column;
		margin: 30rpx 0 31rpx 30rpx;
	}

	.text-wrapper_7 {
		width: 90%;
		height: 40rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-around;
		margin-left: 35rpx;
	}

	.text_18 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 90rpx;
	}

	.text_19 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 90rpx;
		// margin-left: 53rpx;
	}

	.text_20 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 90rpx;
		// margin-left: 68rpx;
	}

	.text_21 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 90rpx;
		// margin-left: 57rpx;
	}

	.section_2 {
		height: 19rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psfg0bzn8wo2m0698dq8dx69kckkk6lp9unc16db2967-03a2-437f-b788-5f8c8ab5645b) 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		width: 630rpx;
		margin: 24rpx 0 0 30rpx;
	}

	.image-wrapper_1 {
		height: 30rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pst3wjo3loaec423wescq98cwoib2c8i5q3b5c1103-5cb6-4d0c-bd93-6f1d3107f422) 100% no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		width: 248rpx;
		margin: -3rpx 0 0 -5rpx;
	}

	.label_1 {
		width: 42rpx;
		height: 42rpx;
		margin: -6rpx 0 0 208rpx;
	}

	.block_4 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 20rpx;
		height: 841rpx;
		width: 690rpx;
		display: flex;
		flex-direction: column;
		margin: -1rpx 0 24rpx 30rpx;
	}

	.block_5 {
		width: 628rpx;
		height: 40rpx;
		flex-direction: row;
		display: flex;
		margin: 29rpx 0 20rpx 30rpx;
	}

	.group_5 {
		background-color: rgba(124, 29, 255, 1.000000);
		border-radius: 50%;
		width: 20rpx;
		height: 20rpx;
		margin-top: 15rpx;
		display: flex;
		flex-direction: column;
	}

	.text_26 {
		width: 129rpx;
		height: 31rpx;
		overflow-wrap: break-word;
		color: rgba(124, 29, 255, 1);
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 48rpx;
		margin-left: 20rpx;
	}

	.text_266 {
		width: 160rpx;
		height: 31rpx;
		overflow-wrap: break-word;
		color: #fff;
		font-size: 32rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 20rpx;
		margin-top: 10rpx;
		// margin-left: 20rpx;
	}

	.text_27 {
		width: 121rpx;
		height: 22rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 23rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 23rpx;
		margin: 6rpx 0 0 338rpx;
	}

	.block_6 {
		width: 100%;
		height: 614rpx;
		flex-direction: row;
		display: flex;
	}

	.block_7 {
		// width: 100%;
		// height: 442rpx;
		// margin-top: 4rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.group_6 {
		width: 100%;
		height: 125rpx;
		flex-direction: row;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		// margin-left: 20rpx;
	}

	.image-text_2 {
		width: 89rpx;
		height: 125rpx;
		margin-top: 1rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 40rpx;
		margin-top: 30rpx;
	}

	.image_2 {
		width: 89rpx;
		height: 88rpx;
	}

	.text-group_3 {
		width: 80rpx;
		height: 18rpx;
		overflow-wrap: break-word;
		color: rgba(88, 88, 88, 1);
		font-size: 18rpx;
		font-family: SourceHanSansSC-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 30rpx;
		margin: 18rpx 0 0 5rpx;
	}


	.block_10 {
		width: 100%;
		height: 80rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 27rpx 0 27rpx 27rpx;
	}

	.box_3 {
		width: 322rpx;
		height: 69rpx;
		margin-top: 3rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text-wrapper_9 {
		width: 112rpx;
		height: 33rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 61rpx;
		margin-left: 5rpx;
	}

	.text_31 {
		width: 112rpx;
		height: 33rpx;
		overflow-wrap: break-word;
		color: rgba(255, 15, 15, 1);
		font-size: 44rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.text_32 {
		width: 112rpx;
		height: 33rpx;
		overflow-wrap: break-word;
		color: rgba(255, 15, 15, 1);
		font-size: 44rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.text_33 {
		width: 112rpx;
		height: 33rpx;
		overflow-wrap: break-word;
		color: rgba(255, 15, 15, 1);
		font-size: 34rpx;
		font-family: DIN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 39rpx;
	}

	.image-text_10 {
		width: 322rpx;
		height: 24rpx;
		margin-top: 12rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.icon_3 {
		width: 25rpx;
		height: 24rpx;
	}

	.text-group_11 {
		width: 294rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.button_1 {
		height: 80rpx;
		// background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pslfvlgb4rebbzgeu21zbvn3ioy2b1idjqabcaaefe-a6eb-48df-94d2-af2b17f2cf6d) 100% no-repeat;
		// background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		width: 210rpx;
		background: linear-gradient(90deg, #3E218C, #4638BE);
		border-radius: 40rpx;
		justify-content: center;
		/* 相对父元素水平居中 */
		align-items: center;
		/*  子元素相对父元素垂直居中 */
		color: #fff;
		margin-right: 30rpx;
	}

	.text_34 {
		width: 116rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
		margin: 26rpx 0 0 61rpx;
	}
</style>